<template>
  <div class="block">
    <span>
      <h3>文件资料</h3>
    </span>
    <el-divider style="border-top:white" />
    <div>
      <el-input
        v-model="searchInput"
        placeholder="请输入关键字搜索"
        clearable
        suffix-icon="el-icon-search"
      />
    </div>
    <el-divider style="border-top:white" />
    <el-radio-group v-model="showDocumentType" size="small" style="margin-bottom: 1rem;">
      <el-radio-button :label="null">全部</el-radio-button>
      <el-radio-button
        v-for="item in documentTypes"
        :key="item.id"
        :label="item.name"
      >{{ item.alias }}</el-radio-button>
    </el-radio-group>
    <DocumentCard
      v-for="item in documentList"
      :key="item.id"
      :card-data="item"
      @requireRefreshDocument="refresh"
    />
    <div style="overflow-y: auto;height:35rem">
      <NoData v-show="totalCount ===0" />
    </div>
    <div style="position: absolute; bottom:1rem;">
      <Pagination :pagesetting.sync="page" :total-count="totalCount" />
    </div>
  </div>
</template>
<script>
import { list } from '@/api/zzxt/notice'
export default {
  name: 'Document',
  components: {
    Pagination: () => import('@/components/Pagination'),
    NoData: () => import('@/views/Loading/NoData'),
    DocumentCard: () => import('./documentCard')
  },
  data: () => ({
    searchInput: null,
    reverse: true,
    documentList: null,
    page: { pageIndex: 0, pageSize: 10 },
    totalCount: 0,
    showDocumentType: null
  }),
  computed: {
    documentTypesArray() {
      if (this.showDocumentType) return this.showDocumentType
      return this.$store.state.notice.documentTypesArray
    },
    documentTypes() {
      return this.$store.state.notice.documentTypes
    }
  },
  watch: {
    page: {
      handler(val) {
        if (!this.documentTypesArray) return
        this.refresh()
      },
      deep: true
    },
    showDocumentType: {
      handler(val) {
        if (!this.documentTypesArray) return
        this.refresh()
      }
    },
    searchInput: {
      handler(val) {
        if (!this.documentTypesArray) return
        this.refresh()
      }
    },
    documentTypesArray: {
      handler(val) {
        if (!val) return
        this.refresh()
      }
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    async refresh() {
      this.loading = true
      const query = { page: this.page, type: this.documentTypesArray }
      if (this.searchInput) query.title = this.searchInput
      await list(query)
        .then(data => {
          this.documentList = data.list
          this.totalCount = data.totalCount
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style lang="scss">
.el-card__header {
  padding: 0.4rem 0.8rem;
}
.el-card__body {
  padding: 0.6rem 0.5rem;
  margin-bottom: 0.3rem;
}
.el-card__body p {
  margin-bottom: 0.5rem;
}
.block {
  padding: 30px;
  border: 2px solid #eff2f6;
  width: 100%;
  height: 50rem;
  box-sizing: border-box;
}
._blank {
  font: 12px/22px 'SimSun', 'Arial Narrow';
  list-style: none;
  line-height: 24px;
  font-size: 14px;
  color: #1f3b7b;
  text-decoration: none;
  outline: none;
}

.single-item {
  width: 100%;
  overflow: hidden;
  transition: all 0.5s ease;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  opacity: 0.8;
  cursor: pointer;
  user-select: none;
  &:hover {
    opacity: 1;
    .item-remove {
      margin-left: 0;
      margin-right: 0.5rem;
      opacity: 1;
    }
  }
  padding: 0.2rem 0.5rem 0.2rem 0.5rem;
  .item-remove {
    transition: all 0.5s ease;
    display: flex;
    :hover {
      color: #f00;
    }
    margin-left: -1rem;
    opacity: 0;
    color: #888;
  }
  .user-name {
    font-size: 10px;
    color: #888;
    width: 80%;
  }
}
</style>
